<template>
  <div>
    <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <!-- 看板 -->
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <div class="card">
            <div class="card-header bg-light lead">
              商品: <span th:text="${product.productName}"></span>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-4">
                  <img
                    :src="product.imageUrl"
                    class="img-fluid img-thumbnail"
                    alt="加载失败"
                  />
                </div>
                <div class="col-md-8">
                  <table class="table table-condensed lead">
                    <tr>
                      <td style="width: 100px">名称</td>
                      <td>
                        <span>{{ product.productName }}</span>
                      </td>
                    </tr>
                    <tr>
                      <td>价格</td>
                      <td>
                        <span>{{ product.price }}</span> ￥
                      </td>
                    </tr>
                    <tr>
                      <td>库存</td>
                      <td>
                        <span>{{ product.stock }}</span> 件
                      </td>
                    </tr>
                    <tr>
                      <td>状态</td>
                      <td>
                        <span
                          :class="
                            product.status
                              ? 'badge badge-success'
                              : 'badge badge-danger'
                          "
                          >{{ product.status ? "上架" : "下架" }}</span
                        >
                      </td>
                    </tr>
                    <tr>
                      <td>访问量</td>
                      <td>
                        <span class="badge badge-secondary"
                          ><span>{{ product.views }}</span></span
                        >
                      </td>
                    </tr>
                    <tr>
                      <td>上架时间</td>
                      <td>
                        <span th:text="${product.launchDate}">{{
                          product.launchDate
                        }}</span>
                      </td>
                    </tr>
                  </table>
                  <hr />
                </div>
              </div>
              <hr />
              <div class="row">
                <div class="col-md-12">
                  <p class="text-justify">
                    <span readonly>{{ product.description }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <a
                href="#"
                class="btn btn-success btn-sm"
                @click="back()"
                ><i class="fa fa-history"></i> 返回</a
              >
              <a
                href="#"
                @click.prevent="secKill(product.id)"
                class="btn btn-success btn-sm offset-10"
                ><i class="fa fa-star-o"></i> 加入秒杀</a
              >
            </div>
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="ProductInfo">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";

import { onMounted, ref, reactive, watch } from "vue";
import { useRoute ,useRouter} from "vue-router";
import { getProductDetail, secKillProduct } from "../../api/product";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
const product = reactive({
  id: 0,
  productName: "",
  price: 0,
  stock: 0,
  status: false,
  views: 0,
  launchDate: "",
  description: "",
  imageUrl: "",
});
const productId = route.params.id as string;
const getProductInfo = async () => {
  const res = await getProductDetail(productId);
  console.log(res);
  Object.assign(product, res.data.data);
};

watch(
  () => route.params.id,
  async (newId: any) => {
    if (newId !== productId) {
      productId = newId;
      product = null;
      await onMounted();
    }
  }
);

const secKill = async (id: number) => {
  const res = await secKillProduct(id);
  if (res.data.code === 1) {
    ElMessage.success("商品加入秒杀成功");
    setTimeout(() => {
      // router.push("/dataView")
      window.location.href = "/dataView";
    }, 1000);
  }
  if (res.data.code === 0) {
    ElMessage.error(res.data.msg)
  }
};
const back = () => {
  window.location.href = "/dataView";
}
onMounted(getProductInfo);
</script>

<style scoped></style>
